<template>
	<view>
		<!--
		enableBackToTop: iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
		lower-threshold: 距底部/右边多远时（单位px），触发 scrolltolower 事件
		refresher-enabled: 开启自定义下拉刷新
		refresher-triggered: 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
		@scrolltolower: 滚动到底部/右边，会触发 scrolltolower 事件
		-->
		<scroll-view class="scroll-v" 
			:scroll-y="true"
			:enable-back-to-top="true"			
			:refresher-enabled="true"  
			:lower-threshold="50"
			:scroll-top="scrollTop" 
			:refresher-triggered="triggered"
			@scroll="onScroll" 
			@refresherrefresh="onRefresh" 
			@refresherrestore="onRestore"
			@scrolltolower="onLoadMore">
			<view v-for="item in rows">{{item.content}}</view>
		</scroll-view>
		<tui-divider  :height="80" v-if="more">我是有底线的</tui-divider>
		<c-nodata v-if="rows.length === 0"></c-nodata>
	</view>
</template>

<script>
	import http from '../../../utils/http.js'
	export default {
		name:'cPagelist',
		props:{						
			url:{
				type:String,
				default:''
			},
			params:{
				type: Object,
				default: ()=>{
					return{
						page: 1,
						size: 15
					}
				}
			}
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				triggered: false,
				refreshing: false, // 是否加载中
				rows: [], //数据列表
				total: 0,
				page: 1
			}
		},
		computed:{
			more(){
				return this.total > this.page * this.size;
			}
		},
		mounted() {
			console.log(this.api)
			this.onRefresh()
		},
		methods: {
			// 监听滚动
			onScroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},
			// 刷新
			onRefresh(){
				if (this.refreshing) return;
				this.refreshing = true;
				this.api().then(res=>{
					this.refreshing = false;
					if(res.ok){
						this.rows = res.rows;
						this.total = res.total;
					}				
				}).catch(err=>{
					this.refreshing = false;
					console.error(err)
				})
			},
			//自定义下拉刷新被复位
			onRestore(){
				
			},
			// 加载更多
			onLoadMore(){
				
			},
			handleQuery(){
				
			}
		}
	}
</script>

<style scoped>
.scroll-v{
	
}
</style>
